<template>
    <div class="p-box" id="app">
        <div class="p-header">
            <img src="./img/goBack.png" alt="goBack.png"> 商品详情
        </div>
        <div class="p-banner">
            <Banner :swiperSlides="swiperSlides"></Banner>
        </div>
        <div class="p-info">
            <div class="left">
                <h1>{{title}}</h1>
                <div class="p-newprice">
                    <i>¥</i>{{newprice}}</div>
                <div class="p-oldprice">价格 :
                    <span>¥ {{oldprice}}</span>
                </div>
            </div>
            <div class="right">
                <a href="#">
                    <img src="./img/share.png" alt="share.png">
                </a>
                <span>分享</span>
            </div>
            <div class="p-detai">
                <div class="freight">快递 :
                    <span>{{freight}}</span>
                </div>
                <div class="sales-volume">月销{{sales}}笔</div>
                <div class="addr">{{addr}}</div>
            </div>
        </div>
        <div class="p-merit">
            <div>
                <img src="./img/feature_icon.png" alt="feature_icon.png">
                <span>正品保障</span>
            </div>
            <div>
                <img src="./img/feature_icon.png" alt="feature_icon.png">
                <span>闪电发货</span>
            </div>
            <div>
                <img src="./img/feature_icon.png" alt="feature_icon.png">
                <span>全国联保</span>
            </div>
            <div>
                <img src="./img/feature_icon.png" alt="feature_icon.png">
                <span>假一赔十</span>
            </div>
            <div>
                <img src="./img/feature_icon.png" alt="feature_icon.png">
                <span>提供发票</span>
            </div>
        </div>
        <div class="p-select-color">
            <span>选择 颜色分类</span>
            <img src="./img/unfold_icon.png" alt="unfold_icon.png">
        </div>
        <div class="p-param">
            <span>产品参数</span>
            <img src="./img/unfold_icon.png" alt="unfold_icon.png">
        </div>
        <div class="p-title">
            <span>评价</span>
        </div>
        <div class="p-evaluate">
            <div class="p-ev-title">宝贝评价({{evaluate}})</div>
            <div class="p-user-info">
                <img src="./img/head_pic.png" alt="head_pic.png">
                <span>{{userinfo}}</span>
            </div>
            <div class="p-content">
                {{content}}
            </div>
            <div class="p-date">
                <span>{{date}}</span>颜色分类 :
                <i>{{color}}</i>
            </div>
            <div class="p-all">
                查看全部评论
            </div>
        </div>
        <div class="p-title">
            <span>详情</span>
        </div>
        <div class="p-details">
            <img class="p-img-1" src="./img/pro_details_01.png" alt="pro_details_01.png">
            <img class="p-img-2" src="./img/pro_details_02.png" alt="pro_details_02.png">
            <img class="p-img-3" src="./img/pro_details_03.png" alt="pro_details_03.png">
        </div>
        <div class="p-footer">
            <div class="left">
                <div class="service">
                    <a href="#">
                        <img src="./img/servers_icon.png" alt="servers_icon.png">
                    </a>
                    <span>客服</span>
                </div>
                <div class="collect">
                    <a href="#">
                        <img src="./img/collect_icon.png" alt="collect_icon.png">
                    </a>
                    <span>收藏</span>
                </div>
            </div>
            <div class="right">
                <a href="#" class="p-add">加入购物车</a>
                <a href="#" class="p-buy">立即购买</a>
            </div>
        </div>
    </div>
</template>

<script>
import Banner from "../components/swiper";
export default {
  data() {
    return {
      title: "防爆瑜伽球普拉提球健身球加厚防爆正品瘦身平衡瑜伽球",
      newprice: "199.00",
      oldprice: "239.00",
      freight: "0.00",
      sales: "1234",
      addr: "广东深圳",
      evaluate: "876",
      userinfo: "fd**fa",
      content: "东西收到了，很不错，很好用，好评。",
      date: "2017-12-12",
      color: "蓝色",
      swiperSlides: []
    };
  },
  components: {
    Banner
  },
  created() {
    this.getImg();
  },
  methods: {
    getImg() {
      this.swiperSlides = [
        require("./img/pro_banner_1.png"),
        require("./img/pro_banner_2.png")
      ];
    }
  }
};
</script>

<style scoped lang="less">
/* @import url("./css/pro_details.css"); */
@import "./css/pro_details.less";

</style>